<template>
  <div id="invoice">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="invoice_box">
      <pakj-field>
        <pakj-field-item title="我的行程" @click="intercityTrip"></pakj-field-item>
      </pakj-field>
    </div>
    <div class="invoice_box">
      <pakj-field>
        <pakj-field-item name="开票历史" title="开票历史" arrow="arrow-right" align="right" @click="invoiceHistory"></pakj-field-item>
        <pakj-field-item name="开票说明" title="开票说明" arrow="arrow-right" align="right" @click="invoiceDescription"></pakj-field-item>
      </pakj-field>
    </div>
    <p class="invoicebanner">
      <img src="@/assets/imgs/dzfp_pic.png" />
    </p>
  </div>
</template>
<script>
import { Icon, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import Field from '@/components/fields/Field';
import FieldItem from '@/components/fields/FieldItem';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '开具发票',
      IsTopbar: true,
      tk: ''
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      // app环境下获取tk
      // this.tk = window.location.href.split("?")[1].split("=")[1];
    }
  },
  methods: {
    intercityTrip() {
      if (Utils.isApp()) {
        this.$router.push({
          name: 'invoiceList',
          query: {
            tk: this.$route.query.tk
          }
        });
      } else {
        this.$router.push({
          name: 'invoiceList'
        });
      }
    },
    invoiceHistory() {
      if (Utils.isApp()) {
        this.$router.push({
          name: 'invoiceHistory',
          query: {
            tk: this.$route.query.tk
          }
        });
      } else {
        this.$router.push({
          name: 'invoiceHistory'
        });
      }
    },
    invoiceDescription() {
      this.$router.push({
        name: 'invoiceDescription'
      });
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#invoice {
  height: 100vh;
  background-color: color-primary-background;
}

.invoice_box {
  padding-top: 20px;
}

.invoicebanner {
  margin-top: 20px;
}

.invoicebanner img {
  width: 100%;
}
</style>
